import { Popover, Tooltip } from 'antd';
import React, { useRef, useState } from 'react';
import styles from './index.module.scss';

import { RefObject } from 'react';
import { useIsomorphicLayoutEffect, useMemoizedFn } from 'ahooks';
import cls from 'classnames';

export function useResizeEffect<T extends HTMLElement>(
    effect: (target: T) => void,
    targetRef: RefObject<T>
) {
    const fn = useMemoizedFn(effect);
    useIsomorphicLayoutEffect(() => {
        const target = targetRef.current;
        if (!target) return;
        if (window.ResizeObserver) {
            let animationFrame: number;
            const observer = new ResizeObserver(() => {
                animationFrame = window.requestAnimationFrame(() => fn(target));
            });
            observer.observe(target);
            return () => {
                window.cancelAnimationFrame(animationFrame);
                observer.disconnect();
            };
        } else {
            fn(target);
        }
    }, [targetRef]);
}

interface ITextTooltip {
    style?: React.CSSProperties;
    str: string;
    suffix?: React.ReactNode | string;
    trigger?: 'hover' | 'click';
    handleClick?: () => void;
    className?: string;
    offset?: [number, number];
    placement?: 'left' | 'right' | 'top' | 'bottom';
    textClassName?: string;
}

export const TextTooltip = (props: ITextTooltip) => {
    const {
        style = {},
        str,
        trigger = 'click',
        suffix,
        handleClick,
        textClassName = '',
    } = props;
    const rootRef = useRef<HTMLDivElement>(null);
    const tooltipRef = useRef<HTMLDivElement>(null);
    const [clickable, setClickable] = useState(false);
    function calcEllipsised() {
        // 没有被截断
        if (
            tooltipRef!?.current!?.scrollWidth >
            tooltipRef!?.current!?.clientWidth
        ) {
            setClickable(true);
        } else {
            setClickable(false);
        }
    }
    useResizeEffect(calcEllipsised, rootRef);

    return (
        <Tooltip
            title={
                <div className="bg-black/[0.85] text-white p-[6px]">{str}</div>
            }
            trigger={clickable ? trigger : ('' as 'click')}
            overlayClassName={styles.textTooltip}
            className={props.className}
            style={{ width: '100%' }}
            zIndex={999999}
            placement={props?.placement || 'right'}
            align={{
                offset: props.offset || [72, 0],
            }}
        >
            <div
                style={{ width: '100%', ...style }}
                className="flex"
                ref={rootRef}
            >
                <div
                    className={cls(
                        textClassName,
                        'text-ellipsis overflow-hidden whitespace-nowrap'
                    )}
                    ref={tooltipRef}
                >
                    <span onClick={() => handleClick?.()}>{str}</span>
                </div>
                {suffix}
            </div>
        </Tooltip>
    );
};
